<template>
    <view class="input-content" :style="{ background: props.contentColor }">
        <view class="input-box" :style="{ background: props.bgColor }">
            <text
                class="icon icon-search"
                :style="
                    'background-repeat: no-repeat;' +
                    'background-image:url(' +
                    getImgOssUrl('/ui-prod-2.0.0/search_1.1.png') +
                    ')'
                "></text>
            <input
                class="input"
                confirm-type="search"
                :placeholder="props.hotKeyword"
                :focus="props.focus"
                :disabled="props.disabled"
                :value="props.contentValue"
                placeholder-class="input-placeholder"
                :placeholder-style="'color: #999999;' + 'text-align:' + getPosition"
                @input="bindInput"
                @confirm="search"
                ref="searchInput"
                :style="
                    'font-size:' + props.size + 'rpx;' + 'background:' + props.bgColor + ';text-align:' + getPosition
                " />
        </view>
        <view class="search_text" @click="search">搜索</view>
    </view>
</template>
<script setup>
import { watch, ref, computed } from 'vue';
import { getImgOssUrl } from '@/commons/utils.js';
const emit = defineEmits(['inputValue', 'search']);
const searchInput = ref();
const props = defineProps({
    hotKeyword: {
        type: String,
        default: ''
    },
    focus: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
    contentValue: {
        type: String,
        default: ''
    },
    size: {
        type: String,
        default: '28'
    },
    bgColor: {
        type: String,
        default: '#fff'
    },
    color: {
        type: String,
        default: '#999999'
    },
    contentColor: {
        type: String,
        default: '#fff'
    },
    position: {
        type: String,
        default: '1'
    }
});
const inputValue = ref('');
const getPosition = computed(() => {
    return props.position == 1 ? 'left' : 'center';
});
const bindInput = e => {
    emit('inputValue', e.detail.value);
};
const bindConfirm = () => {
    emit('bindConfirm');
};
const bindfocus = () => {
    emit('bindfocus');
};
const search = () => {
    emit('search');
};
watch(
    () => props.contentValue,
    val => {
        inputValue.value = val;
    }
);
</script>
<style lang="scss" scoped src="./index.scss"></style>
